<template>
	<view class="puzzle">
		<movable-area class="movable-box">
			<block v-for="(item,index) in dataList" :key="index">
				<movable-view
					class="movable-item"
					:style="{width:itemW+'px',height:itemH+'px','z-index':item.zIndex}"
					direction="all"
					:x='item.x'
					:y='item.y'
					:disabled='item.disabled'
					@change="itemChange($event, item)"
					@touchstart="touchstart(item)"
					@touchend="touchend(item)"
				>
					<view class="item">
						{{index}}
					</view>
				</movable-view>
			</block>
		</movable-area>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				dataList:[],
				list:[{id:5},{id:1},{id:2},{id:3},{id:4},{id:6},{id:7},{id:8},{id:9},{id:10},{id:11},{id:12},{id:13},{id:14},{id:15},{id:16}],
				row:4,				// 默认一列多少个元素
				itemW:'',			// 计算的宽
				itemH:'',			// 计算的高
			}
		},
		onLoad() {
			this.$nextTick(()=>{
				this.movableBox()
			})
			
		},
		methods:{
			movableBox(){
				uni.createSelectorQuery().select('.movable-box').boundingClientRect(res => {
					this.itemW = Math.floor(res.width / this.row)
					this.itemH = Math.floor(res.height / this.row)
					for (let item of this.list) {
						this.addProperties(item)
					}
				}).exec()
			},
			// 点击事件
			touchstart(item){
				this.dataList.forEach(v => {
					v.zIndex = v.index + 9
				})
				item.zIndex = 99
				item.moveEnd = true
			},
			// 点击结束事件
			touchend(item){
				// item.zIndex = 9
				item.moveEnd = false
				item.x=item.absX * this.itemW
				item.y=item.absY * this.itemH
				this.dataList.forEach((res,index) => {
					if(index == item.index){
						// res.x = 0,
						// res.y = 0
					}
				})
				// this.sortList()
				// console.log(this.dataList)
			},
			// 调换两数组的位置
			sortList() {
				
			},
			itemChange(res,item){
				if(res.detail.source=="touch"){
					if(item.moveEnd){
						item.offset = Math.sqrt(Math.pow(item.oldX - item.absX * this.itemW, 2) + Math.pow(item.oldY - item.absY * this.itemH, 2))
					}
					let x = Math.floor((res.detail.x + this.itemW / 2) / this.itemW)
					let y = Math.floor((res.detail.y + this.itemH / 2) / this.itemH)
					let index = this.row * y + x
					// console.log(x,y,index)
					if(index != item.index){
						for (let obj of this.dataList) {
						  if(obj.id != item.id) {
							  console.log(111)
						    obj.offset = 0
						    obj.x = obj.oldX
						    obj.y = obj.oldY
						    setTimeout(() => {
						      this.$nextTick(() => {
						        obj.x = obj.absX * this.itemW
						        obj.y = obj.absY * this.itemH
						      })
						    }, 0)
						  }
						}
						item.absX = x
						item.absY = y
						item.index = index
						// console.log(x,y,index)
					}
				}
			},
			addProperties(item){
				let absX = this.dataList.length % this.row									// x轴坐标
				let absY = Math.floor(this.dataList.length / this.row)			// y轴坐标
				let x = absX * this.itemW																		// x轴定位
				let y = absY * this.itemH																		// y轴定位
				this.dataList.push({
					id:item.id,
					x,
					y,
					oldX: x,
					oldY: y,
					absX,
					absY,
					scale: 1,
					zIndex: 9,
					opacity: 1,
					disabled: false,
					index:this.dataList.length,
					moveEnd: false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.puzzle{min-height: 100vh;display: flex;align-items: center;justify-content: center;}
	.movable-box{width: 700rpx;height: 700rpx;overflow: hidden;box-shadow: 0 0 10rpx rgba(0,0,0,.3);
		.movable-item{padding: 5rpx;box-sizing: border-box;display: flex;
			.item{border-radius: 6rpx;width: 100%;height: 100%;background-color: red;}
		}
	}
</style>
